<template>
    <div class="comment-post">
        <!-- rows为初始高度(3行)， autosize为自适应内容高度 -->
        <van-field 
            ref="vanField"
            v-model.trim="content" 
            rows="3" 
            autosize 
            type="textarea" 
            maxlength="50" 
            :placeholder="authorName ? `回复 @${authorName}:` : '请输入内容'"
            show-word-limit 
        />
        <van-button type="default" size="small" @click="onPostComment" :disabled="content ? false : true">发布</van-button>
    </div>
</template>

<script>
import { addComment } from '@/api/comment'

export default {
    name: 'CommentPost',
    props: {
        commentType: {
            type: String,
            default: 'a'
        },
        target: {
            type: [Number, String],
            required: true
        },
        authorName: {
            type: [String],
            default: null
        }
    },
    // 接收祖先传过来的数据
    inject: {
        articleId: {
            type: [Number, String]
        }
    },
    data() {
        return {
            content: ''
        }
    },
    methods: {
        //发布评论
        onPostComment() {
            // 加载一个发布中的提示
            this.$toast.loading({
                message: '发布中...',
                forbidClick: true, //禁止背景点击
                duration: 0 //持续时间，为0则持续展示
            })

            // 三级回复内容为 @xxx：形式
            if(this.authorName) {
                this.content = `回复 @${this.authorName}: ${this.content}`
            }

            addComment({
                target: this.target, //目标id（评论文章即为文章id，对评论进行回复则为评论id）
                content: this.content, //评论内容	
                art_id: this.commentType === 'c' ? this.articleId : null//文章id，对评论内容发表回复时，需要传递此参数。对文章进行评论时，不要传此参数。	
            }).then(({data}) => {
                console.log(data)
                // 向父组件发生一个自定义事件(处理弹层的关闭和内容的新增)
                this.$emit('postSuccess', data.data.new_obj)
                // 清空文本框
                this.content = ''
                this.$toast.success('发布成功')
            }).catch((err) => {
                console.log('发布失败', err)
                this.$toast.fail('发布失败，请重试')
            })
        }
    },
    mounted() {
        // 让文本框聚焦
        this.$refs.vanField.focus()
    }
}
</script>

<style lang="less" scoped>
.comment-post {
    display: flex;
    align-items: center;
    .van-cell {
        padding-right: 0;
       /deep/ .van-cell__value {
            padding: 0 10px;
            border: 1px solid #b4b4b4;
        }
    }
    .van-button {
        border: none;
        width: 120px;
        color: #3296fa;
        font-size: 30px;
    }
}
</style>